import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Statistic, Row, Col, Timeline } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';

export default (): React.ReactNode => {
  return (
    <PageContainer>
      <Card>
        温馨提示
        <br />
        x-react-tool 开发小工具集合web版， 项目地址：
        <a target="_blank" href="https://gitee.com/xwintop/xReactTool">
          https://gitee.com/xwintop/xReactTool
        </a>
        如果此工具能够帮助您，烦请给本项目点个 star 谢谢。
      </Card>
      <Card>
        <Row gutter={16}>
          <Col span={12}>
            <Card>
              <Statistic
                title="Active"
                value={11.28}
                precision={2}
                valueStyle={{ color: '#3f8600' }}
                prefix={<ArrowUpOutlined />}
                suffix="%"
              />
            </Card>
          </Col>
          <Col span={12}>
            <Card>
              <Statistic
                title="Idle"
                value={9.3}
                precision={2}
                valueStyle={{ color: '#cf1322' }}
                prefix={<ArrowDownOutlined />}
                suffix="%"
              />
            </Card>
          </Col>
        </Row>
      </Card>
      <Card>
        更新说明：
        <Timeline mode="left" reverse={true}>
          <Timeline.Item label="2021-05-28">初次提交首页代码</Timeline.Item>
          <Timeline.Item label="2021-05-31">添加Base64加密解密工具</Timeline.Item>
          <Timeline.Item label="2021-06-01">添加Md5加密工具</Timeline.Item>
        </Timeline>
      </Card>
    </PageContainer>
  );
};
